<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-11-17 10:52:23
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-11-17 11:11:09
 * @FilePath     : \rpms\src\components\StatusInfo\index.vue
-->
<template>
  <div class="content">
    <el-steps :active="currentStep" finish-status="success">
      <el-step
        v-for="(step, index) in steps"
        :key="index"
        :title="step.title"
        :status="index === isChargehand ? 'wait' : ''"
      ></el-step>
    </el-steps>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, PropType,ref } from "vue";
const props = defineProps({
  currentStep: {
    type: Number,
    require: true,
    default: 0
  },
  steps: {
    type: Array as PropType<{ title: string }[]>,
    require: true,
    default: () => []
  },
  isSkip:{
    type: String,
    default: ""
  }
});
const isChargehand = ref(null)
if(props.isSkip === "0"){//跳过节点
  const step = props.steps;
  step.forEach((item,index)=>{
    if(item.isCanJump){
      isChargehand.value = index;
    }
  })
}
</script>

<style lang="scss" scoped>
.content {
  &:deep .el-step__title {
    font-size: 12px;
    line-height: 20px;
    margin-top: 12px;
  }

  // 已完成配置
  &:deep .el-step__title.is-success {
    color: #f9b05d; // 中文字体颜色
  }
  &:deep .el-step__head.is-success {
    color: #fff; // 图标颜色
    .el-step__icon.is-text {
      border-color: #f9b05d; // 圆圈边框
      background-color: #f9b05d; // 圆框背景色
    }
    .el-step__line {
      background-color: #f9b05d; // 已完成直线颜色
    }
  }

  // 正在进行中
  &:deep .el-step__head.is-process {
    color: #f9b05d; // 图标颜色
    // color: red; // 图标颜色
    .el-step__icon.is-text {
      border-color: #f9b05d; // 圆圈边框
      background-color: #fff; // 圆框背景色
    }
    .el-step__icon-inner {
      // display: none;
      width: 16px;
      height: 16px;
      background: #f9b05d;
      border-radius: 50%;
    }
  }
  // 未执行
  &:deep .el-step__head.is-wait {
    // color: #f9b05d; // 图标颜色
    // .el-step__icon.is-text {
    //   border-color: #f9b05d; // 圆圈边框
    //   background-color: #fff; // 圆框背景色
    //
    height: 24px;
    .el-step__icon-inner {
      display: none;
    }
  }
}
</style>
